<!--左按钮，右搜索-->
<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="4" nzSm="4" nzMd="14" nzLg="14" nzXl="18">
    <button nz-button nzType="primary" (click)="addNotice()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      <span *ngIf="!isMobile">添加</span>
    </button>
  </div>

  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="20" nzSm="20" nzMd="10" nzLg="10" nzXl="6">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="公告通知标题" [(ngModel)]="pageHelper.keyword"
             [ngModelOptions]="{standalone: true}"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch (click)="findListByKeyword()"><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>

</div>

<nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed" [nzScroll]="{ x: 'auto' }"
          [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
          (nzPageIndexChange)="nzPageIndexChange($event)"
          [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
          [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <thead>
  <tr>
    <th>序号</th>
    <th>标题</th>
    <th>类型</th>
    <th>状态</th>
    <!--    <th>发布时间</th>-->
    <!--    <th>自动失效时间</th>-->
    <th>创建者</th>
    <th>创建时间</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of nzTable.data">
    <tr>
      <td nzEllipsis>{{ data.id }}</td>
      <td nzEllipsis>{{ data.title }}</td>
      <td nzEllipsis>
        <span *ngIf="data.typeId == noticeTypeEnum.GONG_GAO">公告</span>
        <span *ngIf="data.typeId == noticeTypeEnum.TONG_ZHI">通知</span>
      </td>

      <td nzEllipsis>
        <span *ngIf="data.status == 1">正常</span>
        <span *ngIf="data.status == 2">失效</span>
      </td>
      <!--      <td nzEllipsis>{{ data.publishDateTime | date: 'yyyy-MM-dd HH:mm:ss' }}</td>-->
      <!--      <td nzEllipsis>{{ data.autoRevocationDateTime | date: 'yyyy-MM-dd HH:mm:ss'  }}</td>-->
      <td nzEllipsis>{{ data.username }}</td>
      <td nzEllipsis>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'  }}</td>
      <td nzEllipsis>
        <a>
          <i nz-icon nzType="edit" nzTheme="twotone" (click)="updateNotice(data)" [nzTwotoneColor]="'#52C41A'"
             nz-tooltip
             nzTooltipTitle="编辑" nzTooltipPlacement="bottom"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>
          <i nz-icon nzType="delete" nzTheme="twotone" [nzTwotoneColor]="'#F5222D'" nz-tooltip
             nzTooltipTitle="删除" nzTooltipPlacement="bottom"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>
          <i nz-icon nzType="stop" nzTheme="twotone" (click)="stopNotice(data.id )" [nzTwotoneColor]="'#f50'" nz-tooltip
             nzTooltipTitle="关闭" nzTooltipPlacement="bottom"></i>
        </a>
      </td>
    </tr>
  </ng-container>
  </tbody>
</nz-table>

<app-notice-edit [isVisible]="isVisible" [notice]="notice" (emitVisible)="setVisible($event)"></app-notice-edit>
